<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
<!--    <view class="navbar">
      <text class="app-name">CloudKitchen</text>
      <view class="nav-actions">
        <button class="icon-btn" @click="handleMessage">
          <uni-icons type="chat" size="22" color="#666"></uni-icons>
        </button>
        <button class="icon-btn" @click="handleMenu">
          <uni-icons type="list" size="22" color="#666"></uni-icons>
        </button>
      </view>
    </view> -->

    <!-- 搜索框 -->
    <view class="search-box" @click="goToSearch">
      <uni-icons type="search" size="18" color="#999" class="search-icon"></uni-icons>
      <text class="search-placeholder">搜索菜谱或食材</text>
    </view>

    <!-- Banner轮播 -->
    <view class="banner-container">
      <swiper 
        :indicator-dots="true" 
        :autoplay="true" 
        :interval="3000" 
        :duration="500"
        indicator-active-color="#ff6b6b"
      >
        <swiper-item v-for="(item, index) in banners" :key="index">
          <view class="banner-item">
            <image :src="item.imageUrl" mode="widthFix" class="banner-img"></image>
            <view class="banner-text">
              <text class="banner-title">{{ item.title }}</text>
              <text class="banner-subtitle">{{ item.subtitle }}</text>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 分类图标 -->
    <view class="quick-categories">
      <view class="category-item" v-for="(item, index) in quickCategories" :key="index" @click="handleCategoryClick(item)">
        <view class="category-icon" :style="{ backgroundColor: item.bgColor }">
          <image :src="item.icon" mode="aspectFit" class="category-svg"/>
        </view>
        <text class="category-name">{{ item.name }}</text>
      </view>
    </view>

    <!-- 专题合集 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">专题合集</text>
        <view class="section-more" @click="viewAllTopics">
          <text>查看全部</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <view class="topic-list">
        <view class="topic-item" v-for="(item, index) in topics" :key="index" @click="handleTopicClick(item)">
          <image :src="item.imageUrl" mode="aspectFill" class="topic-img"></image>
          <text class="topic-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 分类推荐 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">推荐</text>
        <view class="section-more" @click="viewAllCategories">
          <text>查看全部</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <view class="category-grid">
        <view class="grid-item" v-for="(item, index) in categoryGrid" :key="index" @click="handleGridCategoryClick(item)">
          <image :src="item.imageUrl" mode="aspectFill" class="grid-img"></image>
          <text class="grid-name">{{ item.name }}</text>
          <text class="grid-count">{{ item.count }}个菜谱</text>
        </view>
      </view>
    </view>



  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 路由实例
const router = useRouter();

// 模拟Banner数据
const banners = ref([
  {
    imageUrl: '/static/images/banner1.jpg',
    title: '奶油美食食谱',
    subtitle: '发现甜蜜滋味'
  },
  {
    imageUrl: '/static/images/banner2.jpg',
    title: '夏日清爽沙拉',
    subtitle: '健康轻食新选择'
  },
  {
    imageUrl: '/static/images/banner3.jpg',
    title: '家常菜大集合',
    subtitle: '每天不重样'
  }
]);

// 快捷分类数据
const quickCategories = ref([
  { name: '早餐', icon: '/static/icons/zaocan.svg', bgColor: '#ff9a9e' },
  { name: '分类', icon: '/static/icons/快餐.svg', bgColor: '#fad0c4' },
  { name: '甜点', icon: '/static/icons/甜点.svg', bgColor: '#fbc2eb' },
  { name: '主食', icon: '/static/icons/主食.svg', bgColor: '#84f191' }
]);

// 分类格栅数据
const categoryGrid = ref([
  { 
    name: '创意减脂餐', 
    count: 208, 
    imageUrl: 'https://picsum.photos/id/292/400/300'  // 健康减脂餐相关图片
  },
  { 
    name: '家常菜', 
    count: 513, 
    imageUrl: 'https://picsum.photos/id/488/400/300'  // 家常菜相关图片
  },
  { 
    name: '地方特色', 
    count: 187, 
    imageUrl: 'https://picsum.photos/id/429/400/300'  // 地方特色菜相关图片
  },
  { 
    name: '家常快手', 
    count: 326, 
    imageUrl: 'https://picsum.photos/id/225/400/300'  // 快手菜相关图片
  }
]);

// 专题合集数据
const topics = ref([
  { 
    name: '夏日开胃菜专区', 
    imageUrl: 'https://picsum.photos/id/312/300/300'  // 夏日开胃菜相关图片
  },
  { 
    name: '快手早餐专区', 
    imageUrl: 'https://picsum.photos/id/225/300/300'  // 早餐相关图片
  },
  { 
    name: '家常下饭菜', 
    imageUrl: 'https://picsum.photos/id/431/300/300'  // 下饭菜相关图片
  }
]);
    

// 导航栏按钮点击事件
const handleMessage = () => {
  console.log('消息按钮点击');
};

const handleMenu = () => {
  console.log('菜单按钮点击');
};

// 搜索框点击事件
const goToSearch = () => {
  router.push('/pages/search/index');
};

// 分类点击事件
const handleCategoryClick = (category) => {
  console.log('快捷分类点击:', category.name);
  router.push(`/pages/category/list?type=${category.name}`);
};

// 格栅分类点击事件
const handleGridCategoryClick = (category) => {
  console.log('格栅分类点击:', category.name);
  router.push(`/pages/category/list?type=${category.name}`);
};

// 查看全部分类
const viewAllCategories = () => {
  console.log('查看全部分类');
  router.push('/pages/category/all');
};

// 专题点击事件
const handleTopicClick = (topic) => {
  console.log('专题点击:', topic.name);
  router.push(`/pages/topic/detail?name=${topic.name}`);
};

// 查看全部专题
const viewAllTopics = () => {
  console.log('查看全部专题');
  router.push('/pages/topic/all');
};

// 切换底部导航
const switchTab = (tab) => {
  console.log('切换到:', tab);
  switch(tab) {
    case 'home':
      router.push('/pages/index/index');
      break;
    case 'category':
      router.push('/pages/category/all');
      break;
    case 'favorite':
      router.push('/pages/favorite/index');
      break;
    case 'mine':
      router.push('/pages/mine/index');
      break;
  }
};
</script>

<style lang="scss" scoped>
// 导航栏样式
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 10px;
  background-color: #fff;
  
  .app-name {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }
  
  .nav-actions {
    display: flex;
    gap: 16px;
    
    .icon-btn {
      background: transparent;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

// 搜索框样式
.search-box {
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  border-radius: 20px;
  padding: 8px 16px;
  margin: 10px 16px;
  
  .search-icon {
    margin-right: 8px;
  }
  
  .search-placeholder {
    color: #999;
    font-size: 14px;
  }
}

// Banner样式
.banner-container {
  margin: 10px 16px;
  border-radius: 12px;
  overflow: hidden;
  
  .banner-item {
    position: relative;
    
    .banner-img {
      width: 100%;
      height: 140px;
      object-fit: cover;
    }
    
    .banner-text {
      position: absolute;
      top: 20px;
      left: 20px;
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      
      .banner-title {
        font-size: 18px;
        font-weight: bold;
        display: block;
        margin-bottom: 4px;
      }
      
      .banner-subtitle {
        font-size: 14px;
      }
    }
  }
}

// 快捷分类样式
.quick-categories {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
  background-color: #fff;
  margin: 10px 0;
  
  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    
    .category-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .category-name {
      font-size: 14px;
      color: #333;
    }
  }
}

// 通用区块样式
.section {
  background-color: #fff;
  margin: 10px 0;
  padding: 10px 16px;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .section-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
    
    .section-more {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 14px;
    }
  }
}

// 分类格栅样式
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  
  .grid-item {
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    
    .grid-img {
      width: 100%;
      height: 100px;
      object-fit: cover;
    }
    
    .grid-name {
      display: block;
      padding: 8px 10px 2px;
      font-size: 14px;
      font-weight: 500;
    }
    
    .grid-count {
      display: block;
      padding: 0 10px 8px;
      font-size: 12px;
      color: #999;
    }
  }
}

// 专题合集样式
.topic-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  
  .topic-item {
    min-width: 120px;
    flex-shrink: 0;
    
    .topic-img {
      width: 120px;
      height: 120px;
      border-radius: 8px;
      object-fit: cover;
    }
    
    .topic-name {
      display: block;
      margin-top: 8px;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
